<template>
  <view class="my-container">
    
    <view class="user-info-section">
      
      <image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
     
      <view class="user-text">
        <text class="name">林铭恒</text>
        <text class="student-id">学号：2531010120120</text>
      </view>
    </view>

    <!-- 分割线 -->
    <view class="divider"></view>

   
    <view class="settings-list">
      
      <view class="setting-item">
        <text class="item-text">我的收藏</text>
        <text class="arrow">＞</text>
      </view>
     
     
     
    </view>
  </view>
</template>

<script>
export default {
  name: "My",
  data() {
    return {};
  }
};
</script>

<style scoped>
/* 整体容器 */
.my-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 个人信息区域 */
.user-info-section {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  background-color: #ffffff;
}

/* 头像样式 */
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 20rpx;
  border: 2rpx solid #eeeeee;
}

/* 用户文字信息 */
.user-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 10rpx;
}

.student-id {
  font-size: 26rpx;
  color: #666666;
}

/* 分割线 */
.divider {
  width: 100%;
  height: 10rpx;
  background-color: #f5f5f5;
}

/* 设置列表容器 */
.settings-list {
  margin-top: 20rpx;
  background-color: #ffffff;
}

/* 列表项样式 */
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #eeeeee;
}

/* 最后一个列表项去掉下边框 */
.setting-item:last-child {
  border-bottom: none;
}

/* 列表项文字 */
.item-text {
  font-size: 30rpx;
  color: #333333;
}

/* 退出登录文字特殊样式 */
.logout-text {
  color: #ff4444;
}

/* 箭头样式 */
.arrow {
  font-size: 26rpx;
  color: #999999;
}
</style>